<template>
  <div>
    <el-table
      class="lat-mc-table"
      :data="data"
      :show-header="false"
      :row-style="{height: '80px'}"
      :lazy="true"
      :row-class-name="tableRowClassName"
      @row-dblclick="insertMusic">
      <el-table-column
        type="index">
        <template #default="scope">
          <span>{{scope.$index+1 | addZero}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="70">
        <template #default="scope">
          <span class="iconfont icon-bofang img-icon"></span>
          <img :src="scope.row.album.picUrl" class="img" @click="insertMusic(scope.row)">
        </template>
      </el-table-column>
      <el-table-column
        width="480">
        <template #default="scope">
          <span style="color:#000">{{scope.row.name}}</span>
          <span style="color: rgb(155,155,155);"
                v-show="scope.row.alias[0]">({{scope.row.alias[0]}})</span>
          <i class="iconfont icon-mv list-icon" v-show="scope.row.mvid !== 0"></i>
          <i class="iconfont icon-VIP list-icon" v-show="scope.row.fee == 1"></i>
        </template>
      </el-table-column>
      <el-table-column
        width="200">
        <template #default="scope">
          <span v-for="(item,i) in scope.row.artists" class="name">{{item.name}} 
            <span v-show="!(i === scope.row.artists.length-1)">/</span> 
          </span>
        </template>
      </el-table-column>
      <el-table-column
        width="275">
        <template #default="scope">
          <span class="name" @click="toPlayList(scope.row.album.id)">{{scope.row.album.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="80">
        <template #default="scope">
          <span class="time">{{scope.row.duration | parsePlayTime}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {request} from 'network/request'
import {addZero,parsePlayTime} from 'common/filter.js'
import {toPlayList} from 'common/function.js'
export default {
  name:'newSong',
  props:{
    type:{
      default:0
    }
  },
  data(){
    return {
      data:null,
    }
  },
  methods:{
    toPlayList,
    async insertMusic(row){
      const data = await request('GET','song/detail',{ids:row.id})
      this.$store.commit('addMusic',data.songs[0])
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 == 0) {
        return 'stripe';
      }
      return '';
    },
    async getLatestMusic(){
      const data = await request('GET',`top/song?type=${this.type}`)
      this.data = data.data
    }
  },
  mounted(){
    this.getLatestMusic()
  },
  filters:{
    addZero,
    parsePlayTime
  },
  watch:{
    type(){
      this.getLatestMusic()
    }
  }
}

</script>

<style scoped>
.img{
  width: 60px;
  height: 60px;
  border-radius: 5px;
  position: absolute;
}
.img-icon{
  padding: 0 3px;
  z-index: 10;
  position:absolute;
  color: var(--netease-color);
  left: 50%;
  top: 50%;
  transform: translate(-20%,-50%);
  background-color: rgb(245,245,244);
  transition: all 1s ease-out;
  border-radius: 50%;
}
.img-icon::before{
  display: inline-block;
  transform: translateX(1px) scale(90%,90%);
}

.list-icon{
  color: var(--netease-color);
  font-size: 25px;
  line-height: 15px;
  position: relative;
  top: 3px;
  padding-left: 3px;
}
.icon-VIP{
  top: 5px;
}
.name{
  color: rgb(39, 38, 38);
  cursor: pointer;
  font-size: 13px;
  font-weight: 200;
}
.name:hover{
  color:var(--font-color);
}
.name span{
  cursor: default;
}
.time{
  color:rgb(155,155,155);
  font-size: 13px;
}
</style>